import './style.less'

import React, { useRef } from 'react'
import {
  onGetUserCouponListXhr,
  onPostDeleteCouponXhr,
  onPostCancelUserCouponXhr,
} from '@/api/coupon'
import ATablePage from '@/components/ATablePage'
import { useNavigate } from 'react-router-dom'
import { ExclamationCircleFilled } from '@ant-design/icons'
import AToast from '@/components/AToast'
import { Modal } from 'antd'
import ABlock from '@/components/ABlock'
import Status from './status'

const { confirm } = Modal
const Coupon = () => {
  const tablePageRef = useRef(null)
  const handleCancel = async (id, record) => {
    if (!id) return AToast.warning('用户优惠券id不存在')
    confirm({
      title: '确认作废该用户优惠券?',
      icon: <ExclamationCircleFilled />,
      content: `优惠券: ${record?.couponName || '未知'}`,
      okText: '确认',
      okType: 'danger',
      cancelText: '取消',
      onOk: async () => {
        try {
          const res = await onPostCancelUserCouponXhr({ id })
          if (res?.success) {
            AToast.success('作废成功')
            tablePageRef.current?.tableRefresh() // 刷新列表
          } else {
            AToast.error(`作废失败: ${res?.errMsg}`)
          }
        } catch (e) {
          AToast.error(`作废失败: ${e}`)
        }
      },
    })
  }
  const filterList = [
    {
      label: '用户手机号',
      name: 'phone',
    },
    {
      label: '优惠券ID',
      name: 'couponId',
    },
    {
      label: '获得方式',
      name: 'issueType',
      type: 'select',
      defaultValue: '',
      options: [
        {
          label: '全部',
          value: '',
        },
        {
          label: '抖音核销',
          value: 1,
        },
        {
          label: '后台发放',
          value: 2,
        },
        {
          label: '美团核销',
          value: 3,
        },
      ],
    },

    {
      label: '优惠券状态',
      name: 'status',
      type: 'select',
      defaultValue: '',
      options: [
        {
          label: '全部',
          value: '',
        },
        {
          label: '已作废',
          value: -2,
        },
        {
          label: '已过期',
          value: -1,
        },
        {
          label: '未使用',
          value: 1,
        },
        {
          label: '已使用',
          value: 2,
        },
      ],
    },
  ]
  const columns = [
    {
      title: '用户信息',
      dataIndex: 'id',
      width: 140,
      render: (_, record) => {
        const { userName, userId, userPhone } = record || {}
        const blockList = [
          {
            label: '昵称',
            value: userName,
          },
          {
            label: '用户ID',
            value: userId,
          },
          {
            label: '手机号',
            value: userPhone,
          },
        ]

        return <ABlock dataList={blockList} />
      },
    },
    {
      title: '获得方式',
      dataIndex: 'productInfo',
      width: 90,
      render: (_, record) => {
        const { issueTypeLabel } = record || {}
        const blockList = [
          {
            value: issueTypeLabel,
            hideLabel: true,
          },
        ]
        return <ABlock dataList={blockList} />
      },
    },
    {
      title: '优惠券信息',
      dataIndex: 'stockInfo',
      width: 230,
      render: (_, record) => {
        const {
          couponName,
          couponId,
          couponCode,
          deductionDuration,
          status,
          issueTimeLabel,
          expLabel,
          orderId, // 已使用订单id
        } = record || {}
        const blockList = [
          {
            label: '名称',
            value: couponName,
          },
          {
            label: '券ID',
            value: couponId,
          },
          {
            label: '优惠券编码',
            value: couponCode,
          },
          {
            label: '时长',
            value: deductionDuration,
          },
          {
            label: '状态',
            renderValue: () => {
              return <Status value={status} orderId={orderId} />
            },
          },
          {
            label: '发放时间',
            value: issueTimeLabel,
          },
          {
            label: '过期时间',
            value: expLabel,
          },
        ]
        return <ABlock dataList={blockList} />
      },
    },
    {
      title: '发放备注',
      dataIndex: 'issueRemark',
      width: 120,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 120,
      render: (_, record) => {
        // 只有未使用状态(status === 1)才显示作废按钮
        if (record.status === 1) {
          return (
            <div>
              <a
                onClick={() => handleCancel(record?.userCouponId, record)}
                style={{ color: '#3D86EE' }}
                className="a-link"
              >
                作废
              </a>
            </div>
          )
        }
        return null
      },
    },
  ]

  return (
    <ATablePage
      ref={tablePageRef}
      filter={{
        filterList,
        column: 3,
      }}
      table={{
        columns,
        bordered: true,
        request: {
          xhr: onGetUserCouponListXhr,
        },
      }}
      className="verification-page"
      actionList={[]}
    />
  )
}
export default Coupon
